import { px2rem } from "@/assets/global-style";
import styled from "styled-components";

export const Wrapper = styled.div`
    margin: ${px2rem(16)} ${px2rem(16)} 0 ${px2rem(16)};
    .video_author_wrapper{
        display: flex;
        align-items: center;
        padding: ${px2rem(8)} 0;
        .author_avatar{
            width: ${px2rem(30)};
            height: ${px2rem(30)};
            .img_avatar{
                height: 100%;
                width: 100%;
                object-fit: contain;
                border-radius: ${px2rem(15)};
            }
        }
        .author_name{
            font-size: ${px2rem(16)};
            padding: 0 ${px2rem(8)};
        }
    }
    .video_content_wrapper{
        width: 100%;
        height: ${px2rem(191)};
        position: relative;
        .video_action_wrapper{
            padding: 0 ${px2rem(16)};
            position: absolute;
            bottom: ${px2rem(16)};
            right: 0;
            left: 0;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            .action_desc{
                font-size: ${px2rem(14)};
                color: white;
            }
            .action_button{
                text-align: center;
                font-size: ${px2rem(16)};
                height: ${px2rem(32)};
                width: ${px2rem(90)};
                line-height: ${px2rem(32)};
                border-radius: ${px2rem(16)};
                background-color: #1fa774;
                color: white;
            }
        }
        .video_cover{
            width: 100%;
            height: ${px2rem(191)};
            .img_cover{
                border-radius: ${px2rem(16)} ${px2rem(16)} 0 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }       
    }
    .video_desc_wrapper{
        background-color: #e9e9e9;
        height: ${px2rem(70)};
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 0 0 ${px2rem(16)} ${px2rem(16)};
        .desc_left{
            height: 70%;
            padding: ${px2rem(16)} ${px2rem(8)};
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            .title{
                height: ${px2rem(20)};
                width: ${px2rem(240)};
                font-size: ${px2rem(18)};
                line-height: ${px2rem(20)};
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .desc{
                font-size: ${px2rem(14)};
                color: #c3c3c3;
            }
        }
        .desc_icon_favorite{
            height: ${px2rem(40)};
            width: ${px2rem(85)};
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 0 ${px2rem(16)};
            color: #7e7e7e;
            .icon-aixin{
                font-size: ${px2rem(24)};
            }
            .favorites{
                &:before{
                    color: red;
                }
            }
            .icon_state{
                font-size: ${px2rem(16)};
                
            }
        }
    }
`
